<template>
  <div>
    <h2>设置项目和 IP 地址</h2>

    <!-- 添加新项目的表单 -->
    <form @submit.prevent="addProject">
      <div>
        <label for="newProjectName">项目名称:</label>
        <input id="newProjectName" v-model="newProjectName" type="text" placeholder="请输入项目名称" />
      </div>
      <div>
        <label for="newIp">IP 地址:</label>
        <input id="newIp" v-model="newIp" type="text" placeholder="请输入新的 IP 地址" />
      </div>
      <button type="submit">添加</button>
    </form>

    <!-- 显示所有项目的列表 -->
    <ul>
      <li v-for="project in projects" :key="project.id">
        {{ project.projectName }} - {{ project.linkUrl }}
        <button @click="editProject(project)">编辑</button>
        <button @click="deleteProject(project.id)">删除</button>
      </li>
    </ul>

    <!-- 编辑项目的表单 -->
    <form v-if="editingProject" @submit.prevent="updateProject">
      <div>
        <label for="editProjectName">项目名称:</label>
        <input id="editProjectName" v-model="currentProject.projectName" type="text" />
      </div>
      <div>
        <label for="editIp">IP 地址:</label>
        <input id="editIp" v-model="currentProject.linkUrl" type="text" />
      </div>
      <button type="submit">保存</button>
      <button @click="cancelEdit">取消</button>
    </form>
  </div>
</template>

<script>
import { getAllProjects, createProject, updateProject, deleteProject } from '@/api/alarmManage';

export default {
  data() {
    return {
      newProjectName: '',
      newIp: '',
      projects: [],
      editingProject: false,
      currentProject: {}
    };
  },
  methods: {
    async fetchProjects() {
      try {
        const response = await getAllProjects();
        this.projects = response.data;
      } catch (error) {
        console.error('获取项目失败:', error);
        alert('获取项目失败，请稍后再试');
      }
    },
    async addProject() {
      if (!this.newProjectName || !this.newIp) return;

      try {
        await createProject({ projectName: this.newProjectName, linkUrl: this.newIp });

        // 清空输入框并刷新列表
        this.newProjectName = '';
        this.newIp = '';
        await this.fetchProjects();
        alert('项目已添加');
      } catch (error) {
        console.error('添加项目失败:', error);
        alert('添加项目失败，请稍后再试');
      }
    },
    async deleteProject(id) {
      try {
        await deleteProject(id);

        // 刷新列表
        await this.fetchProjects();
        alert('项目已删除');
      } catch (error) {
        console.error('删除项目失败:', error);
        alert('删除项目失败，请稍后再试');
      }
    },
    editProject(project) {
      this.editingProject = true;
      this.currentProject = { ...project }; // 使用浅拷贝避免直接修改原数据
    },
    async updateProject() {
      if (!this.currentProject.projectName || !this.currentProject.linkUrl) return;

      try {
        await updateProject(this.currentProject.id, this.currentProject);

        // 刷新列表
        await this.fetchProjects();
        this.cancelEdit();
        alert('项目已更新');
      } catch (error) {
        console.error('更新项目失败:', error);
        alert('更新项目失败，请稍后再试');
      }
    },
    cancelEdit() {
      this.editingProject = false;
      this.currentProject = {};
    }
  },
  mounted() {
    this.fetchProjects();
  }
};
</script>

<style scoped>
form {
  margin-top: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input {
  width: 300px;
  padding: 5px;
  margin-bottom: 10px;
}

button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
</style>